<script setup>
import {onMounted, ref, watch} from "vue";
import tinymce from 'tinymce/tinymce';
import 'tinymce/models/dom';
// 引入样式文件，必须陷入，否则显示不了编辑器
import 'tinymce/skins/ui/oxide/skin.css';
import 'tinymce/skins/content/default/content.css';
import 'tinymce/themes/silver';
import 'tinymce/icons/default/icons';
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/link';
import 'tinymce/plugins/image';
import 'tinymce/plugins/table';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/wordcount';
import 'tinymce/plugins/preview';
import 'tinymce/plugins/emoticons';
import 'tinymce/plugins/emoticons/js/emojis';
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/codesample';
import 'tinymce/plugins/save';
import 'tinymce/plugins/autosave';
import 'tinymce/plugins/searchreplace';
import 'tinymce/plugins/insertdatetime';

const props = defineProps({
  height: {
    type: String,
    default: '300px'
  },
  modelValue: {
    type: String,
    default: ''
  }
});

const content = ref(props.modelValue);
const emits = defineEmits(['update:modelValue']);
watch(() => props.modelValue, (val) => {
  content.value = val;
  if (editorRef.value) {
    editorRef.value.setContent(val);
  }
}, {deep: true});
watch(() => content.value, (val) => {
  emits('update:modelValue', val);
}, {deep: true});

// 工具栏图表
const toolbar = ref([
  'forecolor', 'backcolor',
  'bold', 'italic', 'underline', 'strikethrough',
  'alignleft', 'aligncenter', 'alignright', 'alignjustify', 'outdent', 'indent',
  'blockquote', 'codesample', 'bullist', 'numlist',
  'link', 'image', 'table', 'emoticons',
  'wordcount', 'autosave', 'searchreplace', 'insertdatetime',
  'preview', 'fullscreen', 'removeformat', 'undo', 'redo',
]);

const plugins = ref([
  'codesample', 'advlist', 'autolink', 'link', 'image',
  'lists', 'wordcount', 'table', 'emoticons',
  'fullscreen', 'autosave', 'preview',
  'searchreplace', 'insertdatetime'
]);
const editorRef = ref(null);

onMounted(() => {
  tinymce.init({
    // 指定dom元素
    selector: 'textarea#editor',
    // 去掉右上角的 logo 标志
    promotion: false,
    // 去掉右下角的 logo 标志
    branding: false,
    // 去掉底部元素路径
    elementpath: false,
    // 汉化语言包
    language: 'zh_CN',
    language_url: '/tinymce/langs/zh_CN.js',
    license_key: 'gpl',
    height: 500,
    // 关闭菜单栏
    menubar: false,
    // 工具栏
    toolbar: toolbar.value.join(' '),
    // 插件配置
    plugins: plugins.value.join(' '),
    // 内容样式
    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
    setup: (editor) => {
      editor.on('change', () => {
        content.value = editor.getContent();
      });
      editor.setContent(content.value);
      editorRef.value = editor;
    },
  });
});

watch(() => content.value, (val) => {
  console.log(val);
  content.value = val;
});
const updateContent = (e) => {
  content.value = e.target.value;
  emits('update:modelValue', content.value);
};
defineExpose({
  getContent: () => {
    return content.value;
  }
});
</script>

<template>
  <div>
    <form>
      <textarea id="editor" :value="content" @input="updateContent" placeholder="请输入内容"></textarea>
    </form>
  </div>
</template>

<style scoped>

</style>